<template>
	<view :style="colorStyle" @touchmove.stop.prevent=''>
		<view class="product-window" 
			:class="{on: attr.cartAttr === true, join: iSbnt, joinCart: iScart, 'safa-buttom': safaButtom}">
			<view class="textpic acea-row row-between-wrapper" @touchmove.stop.prevent="moveHandle">
				<view class="pictrue" @click="showImg()">
					<image :src="attr.productSelect.image"></image>
				</view>
				<view class="text">
					<view class="line2 store-name">
						{{ attr.productSelect.store_name }}
					</view>
					<view class="money font-color" v-if="storeInfo.warehouse_type==2">
						<text class="stock">{{$t(`库存`)}}{{ attr.productSelect.stock + unitName }}</text>
					</view>
					<view class="money font-color">
						<view class="row-middle">
							<view class="price_item">
								<!-- 普通商品的实时金价作为价格展示 -->
								<view v-if="storeInfo.current_gold_price&&storeInfo.metal_type!=4">实时金价{{$t(`￥`)}}<text>{{ currentGoldPrice||0 }}</text></view>
								<!-- 固定商品的工费作为价格展示 -->
								<view v-if="storeInfo.metal_type==4">{{$t(`￥`)}}<text>{{ labor_charges||0 }}</text></view>
							</view>
							<!-- storeInfo.metal_type!=4固定价格商品不显示工费 -->
							<view class="price_item" v-if="storeInfo.warehouse_type==2&&Number(labor_charges)&&storeInfo.metal_type!=4">
								工费{{$t(`￥`)}}<text>{{labor_charges||0 }}</text>/g
							</view>
							<view class="progress_box" v-if="storeInfo.warehouse_type==1">
								<progress :border-radius="8" :percent="(storeInfo.wms.leave/storeInfo.wms.all)*100"
									activeColor="#D29E41" stroke-width="4" />
								<view class="text_box">
									剩余库存：{{storeInfo.wms.leave||0}}克
								</view>
							</view>
							<text class='vip-money'
								v-if="is_vip>0 && attr.productSelect.vip_price">{{$t(`￥`)}}{{attr.productSelect.vip_price}}</text>
							<view class="vipImg" v-if="is_vip>0 && attr.productSelect.vip_price">
								<image src="../../static/images/svip.gif"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="guanbi_box flex_c" @click="closeAttr">
					<view class="iconfont icon-guanbi"></view>
				</view>

			</view>
			<view class="rollTop">
				<view class="productWinList">
					<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
						<view class="title">{{ $t(item.attr_name) }}</view>
						<view class="listn acea-row row-middle">
							<view class="itemn" :class="item.index === itemn.attr ? 'on' : ''"
								v-for="(itemn, indexn) in item.attr_value" @click="tapAttr(indexw, indexn)"
								:key="indexn">
								<text v-if="item.attr_name=='克重'">{{ $t(itemn.attr) }}克</text>
								<text v-else>{{ $t(itemn.attr) }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cart acea-row row-between-wrapper" v-if="!is_virtual">
					<view class="title">{{$t(`数量`)}}</view>
					<view class="carnum acea-row row-left">

						<view class="item mysicle reduce acea-row row-center-wrapper"
							:class="attr.productSelect.cart_num <= minQty ? 'on' : ''"
							v-if="attr.productSelect.cart_num <= minQty">
							<text class="iconfont icon-shangpinshuliang-jian"></text>
						</view>
						<view class="item mysicle reduce acea-row row-center-wrapper"
							:class="attr.productSelect.cart_num <= minQty ? 'on' : ''" @click="CartNumDes" v-else>
							<text class="iconfont icon-shangpinshuliang-jian"></text>
						</view>
						<view class='item num acea-row row-middle'>
							<input type="number" always-embed  :cursor-spacing="30" v-model="attr.productSelect.cart_num"
								data-name="productSelect.cart_num"
								@input="bindCode(attr.productSelect.cart_num)"></input>
						</view>
						<view v-if="iSplus" class="item mysicle plus acea-row row-center-wrapper" :class="
				      attr.productSelect.cart_num >= attr.productSelect.stock || (limitNum && attr.productSelect.cart_num >= limitNum)
				        ? 'on'
				        : ''
				    " @click="CartNumAdd">
							<text class="iconfont icon-shangpinshuliang-jia"></text>
						</view>
						<view v-else class='item mysicle plus'
							:class='(attr.productSelect.cart_num >= attr.productSelect.quota) || (attr.productSelect.cart_num >= attr.productSelect.product_stock) || (attr.productSelect.cart_num >= attr.productSelect.num) || (type=="seckill" && attr.productSelect.cart_num >= attr.productSelect.once_num) ? "on":""'
							@click='CartNumAdd'>+</view>
					</view>
				</view>
				<view class="cart acea-row row-between-wrapper">
					<view class="title">{{$t(`价格`)}}</view>
					<view class="price_box red">
						￥{{allPrice||0}}
					</view>
				</view>
				<view class="cart acea-row row-between-wrapper" v-if="storeInfo.sheet_warning"
					style="align-items: initial;border-bottom: none;">
					<view class="tip_text">
						<text v-if="id == 22">*购买后自动存入寄存，可以随时提料和卖出</text>
						<text v-else>{{storeInfo.sheet_warning}}</text>
						
					</view>
				</view>
			</view>
			<!-- <view class="btnBox" v-if="!$slots.default && !$slots.$default"> -->
			<view class="btnBox" v-if="id != 22">
				<view class="joinBnt" @click="goCat(false)">{{$t(`加入购物车`)}}</view>
				<view class="joinBnt bg-color" style="color: white;" v-if=" attr.productSelect.stock"
					@click="goCat(true)">{{$t(`立即购买`)}}</view>
				<view class="joinBnt on" v-else-if=" !attr.productSelect.stock">{{$t(`已售罄`)}}</view>
			</view>
			<!-- <slot v-else /> -->
			
			<view class='footer productWindow' v-else>
				<view class="agree_box flex_c">
					<checkbox-group @change="isAgreen = !isAgreen">
						<view class="icon_box">
							<checkbox :checked="isAgreen" />
						</view>
					</checkbox-group>
			
					<view class="text_info">
						阅读并同意
						<text style="color: #D43030;" @click="$util.goPage('/pages/new_page/agreement/index?type=2')">《销售协议》</text>
					</view>
				</view>
				<!-- <view class="top_box flex_c">
					<view class="">
						{{$t(`合计`)}}:<text class='font-color'>{{$t(`￥`)}}{{ allPrice || 0}}</text>
					</view>
					<view class="thin_detail" @click="openDetailedPop">
						明细
						<text class='iconfont icon-xiangxia'></text>
					</view>
				</view> -->
				
				<view class="btn_box flex_c">
			
					<view class="btn right_btn flex_fc" @click="handleBuyGoldStock(3)">
						<view class="text1">余额支付</view>
						<view class="text2">当前余额：{{userInfo.now_money||0}}</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="btn left_btn flex_fc" @click="handleBuyGoldStock(1)">
						<view class="text1">微信支付</view>
						<view class="text2">需加手续费{{handling_percent}}%</view>
					</view>
					<!-- #endif -->
					
					<!-- #ifdef MP-ALIPAY -->
					<view class="btn left_btn flex_fc" @click="handleBuyGoldStock(2)">
						<view class="text1">支付宝支付</view>
						<view class="text2">需加手续费{{handling_percent}}%</view>
					</view>
					<!-- #endif -->
				</view>
			</view>

		</view>
		<view class="mask" @touchmove.stop.prevent="moveHandle" style="z-index: 99;" :hidden="attr.cartAttr === false"
			@click="closeAttr">
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		get_gold_price_by_metaltype
	} from "@/api/user.js";
	import colors from "@/mixins/color";
	import {
		getProductDetail,
		getProductCode,
		collectAdd,
		collectDel,
		postCartAdd,
	} from "@/api/store.js";
	import { buyGoldStock } from '@/api/new_store.js'
	import {
		wechat_pay,
		balance_pay
	} from '@/api/new_api.js';

	export default {
		mixins: [colors],
		props:{
			padding:{
				type:Number,
				default:0
			},
			authenticate_type:{
				type:Number,
				default:0
			},
			safaButtom: {
				type: Boolean,
				default: false
			}
		},
		computed:{
			...mapGetters({
				userInfo: 'userInfo'
			}),
			allPrice(){
				let price=0
				if(this.storeInfo.metal_type!=4){
					// 最终的价格=（实时金价+工费）*克重*数量
					price = (Number(this.currentGoldPrice) + Number(this.labor_charges)) * this.goldWeight * this.attr.productSelect.cart_num
				}else{
					//固定价格商品 最终的价格=工费*数量
					price=this.labor_charges * this.attr.productSelect.cart_num
				}
				return price.toFixed(2)
			}
		},
		watch: {
			isOpen:{
				handler(nVal,oVal){
					this.$emit('isOpen',nVal)
					if(nVal){
						// this.setStoreInfoFun()
					}else{
						clearInterval(this.timer)
					}
				}
			},
			storeInfo: {
				handler(newVal, oldVal) {
					this.attr.productAttr.forEach((item, indexw) => {
						item.attr_value.forEach((itemn, indexn) => {
							if (item.index === itemn.attr) {
								this.tapAttr(indexw, indexn)
							}
						})
					})
				}
			},

		},
		data() {
			return {
				timer:null,
				goldWeight:0,
				currentGoldPrice:0,
				labor_charges: 0,
				storeInfo: {},
				productValue: {},
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {},
				},
				selectSku: {},
				limitNum: 0,
				minQty: 0,
				isShow: 1,
				iSbnt: 0,
				iSplus: 1,
				iScart: 0,
				is_vip: 0,
				is_virtual: 0,
				type: '',
				unitName: '',
				cart_num: 1,
				attrValue: '',
				id: 0,
				attrTxt: '',
				isOpen: false, //是否打开属性组件
				
				isAgreen: false,
				
				handling_percent: 0
			};
		},
		methods: {
			
			// 获取实时金价
			get_gold_price_by_metaltype(){
				let uid=uni.getStorageSync('UID')
				const params={
					metal_type:this.storeInfo.metal_type,
					uid:uid||0
				}
				get_gold_price_by_metaltype(params).then((res)=>{
					this.currentGoldPrice=res.data.price
					// #ifdef MP-WEIXIN
					this.handling_percent = res.data.cost_config.wechat
					// #endif
					
					// #ifdef MP-ALIPAY
					this.handling_percent = res.data.cost_config.alipay
					// #endif
				})
			},
			
			setStoreInfoFun(id, productType='') {
				const that = this;
				this._productType = id == 22 ? productType : ''
				this.id = id;
				let uid=0
				let myInfo=uni.getStorageSync('USER_INFO')
				if(myInfo){
					uid=JSON.parse(myInfo).uid
				}
				const params={
					id:this.id,
					uid:uid
				}
				getProductDetail(params).then((res) => {
					let storeInfo = res.data.storeInfo;
					that.$set(that, "storeInfo", storeInfo);
					that.timer=setInterval(()=>{
						that.get_gold_price_by_metaltype()
					},1000)
					that.$set(that.attr, "productAttr", res.data.productAttr);
					that.$set(that, "productValue", res.data.productValue);
					that.$set(that, "is_vip", res.data.storeInfo.is_vip);
					that.DefaultSelect();
					that.attr.cartAttr = true;
					that.isOpen = true;

				})
			},
			
			// 购买黄金库存
			async handleBuyGoldStock(payType) {
				if(!this.isAgreen) {
					return this.$util.Tips({
						title: '阅读并同意《销售协议》'
					})
				}
				if (payType === 3 && parseFloat(this.userInfo.now_money) < parseFloat(this.allPrice)) {
					return this.$util.Tips({
						title: this.$t(`余额不足`)
					});
				}
				if(this._loading) return
				this._loading = true
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				
				try{
					// 1 微信支付、2 支付宝支付、3 余额支付
					const {status, msg, data} = await buyGoldStock({
						weight: this.attr.productSelect.cart_num * this.goldWeight,
						pay_type: payType,
						// bidprice: this.allPrice,
						bidprice: this.currentGoldPrice,
						type: 1 // 1黄金2白银3铂金4钯金
					})
					const { order_info } = data
					this._order_sn = order_info.order_sn
					
					if(status == 200) {
						if(payType === 1) {
							// 微信支付
							const {status, data} = await wechat_pay({
								paytype: 'weixin',
								uni: this._order_sn
							})
							if(status === 200) {
								uni.requestPayment({
									...data.result.jsConfig,
									success: (res)=>{
										this.$util.Tips({
											title: '支付成功'
										})
										this.$emit('paySuccess')
										// setTimeout(()=>{
										// 	this.$util.JumpPath('/pages/new_gold/repurchase/orderSuccess')
										// }, 1500)
									},
									fail: (e)=>{
										console.error('pay fail', e);
										this.$util.Tips({
											title: '支付失败'
										})
									},
									complete: ()=>{
										this.isOpen = false;
										this.attr.cartAttr = false;
									}
								})
							}
						}else if(payType === 2) {
							// 支付宝支付
						}else if(payType === 3) {
							// 余额支付
							balance_pay({order_sn: this._order_sn}).then(({status, data})=>{
								if(status === 200) {
									this.$util.Tips({
										title: '支付成功'
									})
									this.$emit('paySuccess')
									// this.$util.JumpPath('/pages/new_gold/repurchase/orderSuccess')
								}else {
									this.$util.Tips({
										title: '支付失败'
									})
								}
								this.isOpen = false;
								this.attr.cartAttr = false;
							})
						}
					}
				}catch(e){
					//
				}
				uni.hideLoading()
				this._loading = false
			},
			/*
			 * 加入购物车
			 */
			goCat: function(news) {
				let that = this,
					productSelect = that.productValue[this.attrValue];
				that.currentPage = false;
				//打开属性
				if (
					that.attr.productAttr.length &&
					productSelect === undefined
				)
					return that.$util.Tips({
						title: that.$t(`产品库存不足，请选择其它属性`),
					});
				if (that.attr.productSelect.cart_num <= 0) {
					that.attr.productSelect.cart_num = 1;

					return that.$util.Tips({
						title: that.$t(`请选择数量`),
					});
				}
				let q = {
					productId: that.id,
					cartNum: that.attr.productSelect.cart_num,
					new: news ? 1 : 0,
					uniqueId: that.attr.productSelect !== undefined ?
						that.attr.productSelect.unique : "",
					virtual_type: that.storeInfo.virtual_type,
				};
				postCartAdd(q)
					.then(function(res) {
						that.isOpen = false;
						that.attr.cartAttr = false;
						if (news) {
							uni.navigateTo({
								url: `/pages/goods/order_confirm/index?new=1&cartId=${res.data.cartId}&productType=${that._productType}`,
							});
						} else {
							that.$util.Tips({
								title: that.$t(`添加成功`),
								success: function() {
									that.$emit('getCount')
								}
							});
						}
					})
					.catch((err) => {
						that.isOpen = false;
						return that.$util.Tips({
							title: err,
						});
					});
			},

			/**
			 * 默认选中属性
			 *
			 */
			DefaultSelect: function() {
				let productAttr = this.attr.productAttr;
				let value = [];
				console.log(this.productValue)
				for (var key in this.productValue) {
					if (this.productValue[key].stock > 0) {
						value = this.attr.productAttr.length ? key.split(",") : [];
						break;
					}
				}
				for (let i = 0; i < productAttr.length; i++) {
					this.attr.productAttr[i].index = value[i]
				}
				//sort();排序函数:数字-英文-汉字；

				let productSelect = this.productValue[value.join(",")];
				if (productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this.attr.productSelect, "cart_num", this.storeInfo.min_qty);
					this.$set(this, "attrValue", value.join(","));
					this.$set(
						this.attr.productSelect,
						"vip_price",
						productSelect.vip_price
					);
					this.$set(this, "attrTxt", this.$t(`已选择`));
				} else if (!productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.price);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(
						this.attr.productSelect,
						"vip_price",
						this.storeInfo.vip_price
					);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", this.$t(`请选择`));
				} else if (!productSelect && !productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.price);
					this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
					this.$set(
						this.attr.productSelect,
						"unique",
						this.storeInfo.unique || ""
					);
					this.$set(this.attr.productSelect, "cart_num", this.storeInfo.min_qty);
					this.$set(
						this.attr.productSelect,
						"vip_price",
						this.storeInfo.vip_price
					);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", this.$t(`请选择`));
				}
			},
			moveHandle() {},
			getpreviewImage: function() {
				uni.previewImage({
					urls: this.attr.productSelect.image.split(','),
					current: this.attr.productSelect.image
				});
			},
			/**
			 * 购物车手动输入数量
			 * 
			 */
			bindCode: function(e) {
				if (e) {
					let number = this.storeInfo.min_qty;
					if (Number.isInteger(parseInt(e)) && parseInt(e) >= this.storeInfo.min_qty) {
						number = parseInt(e);
					}
					this.$nextTick(e => {
						this.$set(this.attr.productSelect, "cart_num", e < 0 ? this.storeInfo.min_qty :
							number);
					})
				}
			},
			closeAttr: function() {
				this.$set(this.attr, "cartAttr", false);
				this.$set(this, "isOpen", false);
			},
			ChangeCartNum(changeValue) {
				let productSelect = this.productValue[this.attrValue];
				//如果没有属性,赋值给商品默认库存
				if (productSelect === undefined && !this.attr.productAttr.length)
					productSelect = this.attr.productSelect;
				//无属性值即库存为0；不存在加减；
				let stock = productSelect.stock || 0;
				let num = this.attr.productSelect;
				if (productSelect === undefined || (this.storeInfo.limit_num && num.cart_num >= this.storeInfo
						.limit_num && changeValue)) return;
				if (changeValue) {
					num.cart_num++;
					if (num.cart_num > stock) {
						this.$set(this.attr.productSelect, "cart_num", stock ? stock : this.storeInfo.min_qty);
						this.$set(this, "cart_num", stock ? stock : 1);
					}
				} else {
					num.cart_num--;
					if (num.cart_num < 1) {
						this.$set(this.attr.productSelect, "cart_num", this.storeInfo.min_qty);
						this.$set(this, "cart_num", 1);
					}
				}
			},
			CartNumDes: function() {
				this.ChangeCartNum(false)
			},
			CartNumAdd: function() {
				this.ChangeCartNum(true)
			},
			tapAttr: function(indexw, indexn) {
				let that = this;
				// this.$set(this.attr.productAttr[indexw], "index", this.attr.productAttr[indexw].attr_values[indexn]);
				this.$set(this.attr.productAttr[indexw], "index", this.attr.productAttr[indexw].attr_values[indexn]);
				let value = that
					.getCheckedValue()
					.join(",");
				that.ChangeAttr(value);
				if (this.limitNum == 1) {
					if (this.attr.productSelect.quota > 0) {
						this.attr.productSelect.cart_num = 1
					} else {
						this.attr.productSelect.cart_num = 0
					}
				}
				if(!value.includes(',')){
					this.goldWeight=Number(value)
				}else{
					const weight=value.split(',')[0]
					this.goldWeight=Number(weight)
				}
				if(this.authenticate_type==0){
					this.labor_charges = this.productValue[value].labor_charges
				}else{
					this.labor_charges = this.productValue[value].certifi_labor_charges
				}
			},
			ChangeAttr(res) {
				let productSelect = this.productValue[res];
				if (!productSelect) {
					this.$util.Tips({
						title: this.$t(`重新选择`),
						success: () => {
							this.noGoods = true
							this.attr.productSelect.stock = 0
							this.attr.productSelect.quota = 0
							this.attr.productSelect.cart_num = 0
						},
					});
				} else {
					this.noGoods = false
				}
				this.$set(this, "selectSku", productSelect);
				if (productSelect && productSelect.stock > 0) {
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this.attr.productSelect, "cart_num", this.storeInfo.min_qty);
					this.$set(
						this.attr.productSelect,
						"vip_price",
						productSelect.vip_price
					);
					this.$set(this, "attrValue", res);

				} else {
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(
						this.attr.productSelect,
						"vip_price",
						this.storeInfo.vip_price
					);
					this.$set(this, "attrValue", "");

				}
			},
			//获取被选中属性；
			getCheckedValue: function() {
				let productAttr = this.attr.productAttr;
				let value = [];
				for (let i = 0; i < productAttr.length; i++) {
					for (let j = 0; j < productAttr[i].attr_values.length; j++) {
						if (productAttr[i].index === productAttr[i].attr_values[j]) {
							value.push(productAttr[i].attr_values[j]);
						}
					}
				}
				return value;
			},
			showImg() {
				this.$emit('getImg');
			},
		}
	}
</script>

<style scoped lang="scss">
	.footer {
		text-align: center;
		width: 100%;
		background-color: #fff;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: relative;
		z-index: 9;
	
		.btn_box {
			border-top: 1rpx solid #F5F6F7;
			padding-top: 22rpx;
			width: 718rpx;
			margin: 0 auto;
	
			.btn {
				width: 359rpx;
				padding: 15rpx 0;
				height: 110rpx;
	
				.text1 {
					font-size: 34rpx;
					margin-bottom: 5rpx
				}
	
				.text2 {
					font-size: 22rpx;
				}
			}
	
			.left_btn {
				border-radius: 0px 100rpx 100rpx 0rpx;
				
				background: #F3EEE1;
				color: #8C7137;
			}
	
			.right_btn {
				border-radius: 100rpx 0px 0px 100rpx;
				color: #fff;
				background: #C3A769;
			}
		}
	.agree_box {
		margin: 20rpx 0;
	}
	// 	.top_box {
	// 		padding: 30rpx 0;
	// 		border-bottom: 1rpx solid #F5F6F7;
	// 		font-size: 30rpx;
	
	// 		.thin_detail {
	// 			margin-left: 10rpx;
	// 			font-size: 26rpx;
	// 			color: #737272;
	
	// 			.iconfont {
	// 				font-size: 20rpx;
	// 			}
	// 		}
	// 	}
	
	}
	.progress_box {
		font-size: 26rpx;
		color: #B5B5B5;
		margin-top: 50rpx;

		.text_box {
			text-align: right;
			margin-top: 10rpx;
		}
	}

	.vip-money {
		color: #282828;
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 6rpx;
	}

	.vipImg {
		width: 68rpx;
		height: 27rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.red {
		color: #E63523 !important;
	}

	.product-window {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		z-index: 100;
		border-radius: 16rpx 16rpx 0 0;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		// padding-bottom: 40rpx;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)/2); ///兼容 IOS<11.2/
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom)/2); ///兼容 IOS>11.2/
		&.safa-buttom {
			padding-bottom: calc(160rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		}

		.store-name {
			font-size: 34rpx;
			color: #2E2E2E;
			font-weight: 700;
		}
	}

	.product-window.on {
		transform: translate3d(0, 0, 0);
	}

	.product-window.join {
		padding-bottom: 30rpx;
	}

	.product-window.joinCart {
		padding-bottom: 30rpx;
		z-index: 10000;
	}

	.product-window .textpic {
		padding: 0 80rpx 0 30rpx;
		margin-top: 29rpx;
		position: relative;
	}

	.product-window .textpic .pictrue {
		width: 150rpx;
		height: 150rpx;
	}

	.product-window .textpic .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.product-window .textpic .text {
		width: 470rpx;
		font-size: 28rpx;
		color: #202020;
	}

	.product-window .textpic .text .money {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #E63523 !important;
		// .price_item{
		// 	margin-top: 10rpx;
		// }
	}

	.product-window .textpic .text .money .num {
		font-size: 36rpx;
	}

	.product-window .textpic .text .money .stock {
		color: #999;
		margin-left: 6rpx;
		margin-right: 20rpx;
	}

	.product-window .textpic .guanbi_box {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		overflow: hidden;
		background: #CCCCCC;
		position: absolute;
		right: 30rpx;
		top: -5rpx;

		.iconfont {
			font-size: 35rpx;
			color: #474747;
		}
	}

	.product-window .rollTop {
		max-height: 500rpx;
		overflow: auto;
		margin-top: 36rpx;
		padding: 0 30rpx;
	}

	.product-window .productWinList {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.product-window .productWinList .item~.item {
		margin-top: 36rpx;
	}

	.product-window .productWinList .item .title {
		font-size: 30rpx;
		color: #999;
		// padding: 0 30rpx;
	}

	.product-window .productWinList .item .listn {
		// padding: 0 30rpx 0 16rpx;
	}

	.product-window .productWinList .item .listn .itemn {
		border: 1px solid #F2F2F2;
		font-size: 26rpx;
		color: #282828;
		padding: 7rpx 33rpx;
		border-radius: 25rpx;
		margin: 20rpx 0 0 14rpx;
		background-color: #F2F2F2;
	}

	.product-window .productWinList .item .listn .itemn.on {
		color: var(--view-theme);
		background: var(--view-minorColorT);
		border-color: var(--view-theme);
	}

	.product-window .productWinList .item .listn .itemn.limit {
		color: #999;
		text-decoration: line-through;
	}

	.product-window .cart {
		// margin-top: 36rpx;
		padding: 30rpx 0;
		align-items: center;
		border-bottom: 1rpx solid #E6E6E6;

		.price_box {
			font-size: 34rpx;
		}

		.tip_text {
			font-size: 26rpx;
			color: #FF1717;
		}
	}

	.product-window .cart .title {
		font-size: 30rpx;
		color: #999;
	}

	.product-window .cart .carnum {
		height: 54rpx;
		align-items: center;

		.stock {
			font-size: 20rpx;
			line-height: 54rpx;
			color: #aaa;
		}

		.line {
			padding: 0 6rpx;
		}
	}

	.product-window .cart .carnum .iconfont {
		font-size: 25rpx;
	}

	.product-window .cart .carnum view {
		// border: 1px solid #a4a4a4;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		// line-height: 54rpx;
		color: #282828;
		font-size: 45rpx;
	}

	.product-window .cart .carnum .reduce {
		border-right: 0;
		border-radius: 6rpx 0 0 6rpx;
		// line-height: 48rpx;
		font-size: 60rpx;

	}

	.product-window .cart .carnum .mysicle {
		border-radius: 50% !important;
		border: 2rpx solid var(--view-theme);
		overflow: hidden;

		.iconfont {
			color: var(--view-theme);
		}

	}

	.product-window .cart .carnum .reduce.on {
		// border-color: #e3e3e3;
		border: 2rpx solid #e3e3e3;
		color: #DEDEDE !important;

		.iconfont {
			color: #DEDEDE !important;
		}
	}

	.product-window .cart .carnum .plus {
		border-radius: 0 6rpx 6rpx 0;
		// line-height: 46rpx;
	}

	.product-window .cart .carnum .plus.on {
		// border-color: #e3e3e3;
		border: 2rpx solid #e3e3e3;
		color: #dedede !important;

		.iconfont {
			color: #DEDEDE !important;
		}
	}

	.product-window .cart .carnum .num {
		background: rgba(242, 242, 242, 1);
		color: #282828;
		font-size: 28rpx;
		margin: 0 20rpx;
		width: 90rpx;
		border-radius: 4rpx;
		height: 52rpx;
		line-height: 52rpx;
	}

	.product-window .btnBox {
		width: 100%;
		text-align: center;
		display: flex;
		padding: 0 30rpx;
	}

	.product-window .joinBnt {
		font-size: 30rpx;
		// width: 300rpx;
		// width: 600rpx;
		flex: 1;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		color: var(--view-theme);
		margin: 21rpx 10rpx 0 10rpx;
		display: inline-block;
		vertical-align: top;
		background-color: var(--view-bntColor);
	}

	.product-window .joinBnt.on {
		background-color: #bbb;
		color: #fff;
	}
</style>